<template>
  <div id="playMv">
    <div class="exit" @click="exit">
      <i class="exitIcno"></i>
      <span>返回mv分类</span>
    </div>
    <div class="content">
      <div class="left">
        <div class="name">
          <span>mv</span>
          <span>{{ name }}</span>
        </div>
        <div id="video">
          <video controls ref="video" width="800" height="450" autoplay></video>
        </div>
      </div>
      <div class="right">
        <div class="title">mv简介</div>
        <div class="art">
          <span>演唱者: </span>
          <span v-for="(item, index) in artName" :key="index">{{
            item.name
          }}</span>
        </div>
        <div class="time">
          <span>发布时间: </span>
          <span>{{ time }}</span>
        </div>
        <div class="playCount">
          <span>播放次数: </span>
          <span>{{ playCount }}</span>
        </div>
        <div class="fenge"></div>
        <div class="like">
          <i class="likeIcno"></i>
          <span>赞</span>
          <span>({{ likedCount }})</span>
        </div>
        <div class="sub">
          <i class="subIcno"></i>
          <span>收藏</span>
          <span>({{ subCount }})</span>
        </div>
        <div class="share">
          <i class="shareIcno"></i>
          <span>分享</span>
          <span>({{ shareCount }})</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // mvid
      mvid: null,
      // mvurl
      mvUrl: "",
      //   歌手
      artName: null,
      // 歌名
      name: null,
      // 简介
      desc: null,
      // 发布时间
      time: null,
      // 播放量
      playCount: null,
      // 分享量
      shareCount: null,
      // 点赞量
      likedCount: null,
      // 收藏量
      subCount: null,
    };
  },
  methods: {
    exit() {
      this.$router.replace("/mv");
    },
  },
  created() {
    let _this = this;
    this.mvid = this.$route.query.id;
    this.$axios({
      url: "/mv/detail",
      params: {
        mvid: this.mvid,
      },
    }).then((res) => {
      this.name = res.data.data.name;
      this.artName = res.data.data.artists;
      this.playCount = res.data.data.playCount;
      this.time = res.data.data.publishTime;
      this.shareCount = res.data.data.shareCount;
      this.subCount = res.data.data.subCount;
    });
    this.$axios({
      url: "/mv/detail/info",
      params: {
        mvid: this.mvid,
      },
    }).then((res) => {
      this.likedCount = res.data.likedCount;
    });
    this.$axios({
      url: "/mv/url",
      params: {
        id: this.mvid,
      },
    }).then((res) => {
      setTimeout(function () {
        _this.$refs.video.src = res.data.data.url;
      });
    });
  },
};
</script>

<style scoped>
@import url("../css/mvDetail");
</style>